<script setup lang="ts">
import { ref } from 'vue'
import type { BannerItem } from '@/types/home'

let current = ref(0)
const change = (e: { detail: { current: number } }) => {
  current.value = e.detail.current
}
// 定义 props 接收
defineProps<{
  swiperList: BannerItem[]
}>()
</script>

<template>
  <view class="carousel">
    <uni-swiper-dot :info="swiperList" :current="current" field="content" mode="round">
      <swiper class="swiper-box" @change="change">
        <swiper-item v-for="(item, index) in swiperList" :key="index">
          <navigator :url="item.hrefUrl" hover-class="none" class="navigator">
            <image mode="aspectFill" class="image" :src="item.imgUrl"></image>
          </navigator>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
  </view>
</template>

<style lang="scss">
/* 轮播图 */
.carousel {
  height: 280rpx;
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  background-color: #efefef;
  .indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16rpx;
    display: flex;
    justify-content: center;
    .dot {
      width: 30rpx;
      height: 6rpx;
      margin: 0 8rpx;
      border-radius: 6rpx;
      background-color: rgba(255, 255, 255, 0.4);
    }
    .active {
      background-color: #fff;
    }
  }
  .navigator,
  .image {
    width: 100% !important;
    height: 100% !important;
  }
}
</style>
